<template>
	<view>
		<view class="head-remark">
			<view class="head-back" @click="backTo">
				<view class="iconfont icon-zuojiantou"></view>
			</view>
			<view class="head-title">
				<view>{{comments}} 条评论</view>
			</view>
		</view>
		<!-- 显示长评数量 -->
		<view class="long-num" v-if="bool">
			{{long}}条长评
		</view>
		<!-- 长评 -->
		<view class="long-remark" v-for="(item,index) in longList">
			<view class="long-head">
				<view class="long-head-img">
					<image style="width: 50px;height: 50px;border-radius: 50%;" :src="item.avatar" mode=""></image>
				</view>
				<view class="long-head-auth">
					<view>{{item.author}}</view>
				</view>
				<view class="long-head-more">
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<view class="long-content">
				<view class="long-con-com">
					<view>{{item.content}}</view>
				</view>
				<view class="long-con-other">
					<view>//{{item.reply_to.content}}: {{item.reply_to.author}}</view>
				</view>
				<view class="long-con-lang">
					<view class="long-time">
						今天 {{longTime}}
					</view>
					<view class="long-good">
						<view class="num">{{item.likes}}</view>
						<view class="iconfont icon-dianzan"></view>
					</view>
					<view class="long-qibao">
						<view class="iconfont icon-liaotianqipao"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 短评数量 -->
		<view class="short-num" v-if="flag">
			{{short}}条短评
		</view>
		<!-- 短评 -->
		<view class="short-remark" v-for="(item,index) in shortList">
			<view class="short-head">
				<view class="short-head-img">
					<image style="width: 50px;height: 50px;border-radius: 50%;" :src="item.avatar" mode=""></image>
				</view>
				<view class="short-head-auth">
					<view>{{item.author}}</view>
				</view>
				<view class="short-head-more"  @tap="btnMask">
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<!-- 短评内容 -->
			<view class="short-content">
				<view class="short-con-com">
					<view>{{item.content}}</view>
				</view>
				<!-- <view class="short-con-other">
					<view>{{item.reply_to.content}}</view>
				</view> -->
				<view class="short-con-lang">
					<view class="short-time">
						今天  {{item.time}}
					</view>
					
					<view class="short-good">
						<view class="num">{{item.likes}}</view>
						<view class="iconfont icon-dianzan" @tap="goodComments"></view>
					</view>
					<!-- <view class="short-good" v-if="mouse == true">
						<view class="num">{{item.likes + 1}}</view>
						<view class="iconfont icon-mianxing-10" @tap="goodComments"></view>
					</view> -->
					
					<view class="short-qibao"  @tap="btnMask">
						<view class="iconfont icon-liaotianqipao"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 显示全部评论 -->
		<view class="all_comments">
			<view>没有更多评论啦~</view>
		</view>
		<!-- 说说你的看法 -->
		<view class="talk_about" @tap="btnMask">
			<view class="about_img">
				<image src="../../static/icon.jpg" style="width: 50px;height: 50px;border-radius: 50%;" mode=""></image>
			</view>
			<view class="about_you">
				<input type="text" value="" placeholder="说说你的看法..." />
			</view>
		</view>
		<!-- 登录失败 -->
	   <view class="mask" v-if="mask" @tap="hideMask">
	   	<view class="login-mask">
	   		<view class="mask-name">登录一晨看报</view>
	   		<view class="mask-con">选择登录方式</view>
	   		<view class="mask-choose" >
	   			<view class="mask-weixi" @tap="btnLoading">
	   				<view class="iconfont icon-weixin"></view>
	   			</view>
	   			<view class="mask-qq" @tap="btnLoading">
	   				<view class="iconfont icon-QQ"></view>
	   			</view>
	   		</view>
	   		<view class="mask-xieyi">
				<view class="radio"></view>
	   			<view class="txt">我同意<a class='one'>《一晨协议》</a>和<a class='one'>《个人信息保护指引》</a></view>
	   		</view>
	   	</view>
	   </view>
	</view>
	
</template>

<script>
	//引入richText.js
	import graceRichText from '../../components/richText.js';
	
	export default {
		data() {
			return {
				id : '',
				comments : '0',
				long : '',
				short : '',
				longTime : '',
				shortTime : '',
				longList : [],
				shortList : [],
				arr : [],
				flag : false,
				bool : false,
				mouse : false,
				mask : false,
			}
		},
		methods: {
            getShort(){
				let url = "https://apis.netstart.cn/zhihudaily/story/"+this.id+"/short-comments";
				uni.request({
					url : url,
					method:"GET",
					success:(response)=>{
						var res = response.data;
						// console.log(this.shortList);
						// console.log("res",res);
						// 时间戳转换成时间格式
						for(var i = 0;i < res.comments.length;i ++){
							var time = res.comments[i].time;
							function getLocal(time){
								return new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');  
							}
							var times = getLocal(time).split('').splice(9).join('');
							res.comments[i].time = times
						}
						this.shortList = res.comments;
						// console.log(this.shortList);
					},
					fail:()=>{
						console.log("请求失败...");
					}
				})
			},
			getLong(){
				let url = "https://apis.netstart.cn/zhihudaily/story/"+this.id+"/long-comments";
				uni.request({
					url : url,
					method:"GET",
					success:(response)=>{
						var res = response.data;
						this.longList = res.comments;
						// console.log("res",res);
						// 时间戳转换成时间格式
						var time = res.comments[0].time;
						function getLocal(ns){
							return new Date(parseInt(ns) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');  
						}
						var times = getLocal(time).split('').splice(9).join('');
						this.longTime = times;
						// console.log(this.longTime);
					},
					fail:()=>{
						console.log("请求失败...");
					}
				})
			},
			getExtra(){
				let url = "https://apis.netstart.cn/zhihudaily/story/"+this.id+"/extra";
				uni.request({
					url : url,
					method:"GET",
					success:(response)=>{
						let res = response.data;
						this.comments = res.comments;
						this.long = res.long_comments;
						this.short = res.short_comments;
						// console.log("res",res);
						if(this.long != 0){
							this.bool = true;
						}
						
						if(this.short != 0){
							this.flag = true;
						}
					},
					fail:()=>{
						console.log("请求失败...");
					}
				})
			},
			backTo(){
				uni.navigateBack();
			},
			goodComments(){
				for(var i = 0;i < this.shortList.length;i++){
					var  likes = this.shortList[i].likes;
					console.log(likes);
					console.log(this.shortList[i].id);
				}
			},
			btnMask(){
				this.mask = true;
			},
			hideMask(){
				this.mask = false;
			},
			btnLoading(){
				uni.showToast({
				    title: '登录失败',
					icon : 'none'
				});
				setTimeout(function () {
				    uni.hideToast();
				}, 2000);
			}
		},
		onLoad(option) {
			this.id = option.id;
			let id = this.id;
			// console.log("id2",option.id);
			this.getShort();
			this.getLong();
			this.getExtra();
		}
	}
</script>

<style>
	@import '../../common/content.css';
	/* 引入iconfontcss */
	@import '../../common/iconfont.css';
.one{
	color: #0066CF;
}	
.head-remark{
	width: 100%;
	height: 60px;
	display: flex;
	border-bottom: 1px solid #dee1e6;
}	
.head-remark .head-back{
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
}
.head-remark .head-back .iconfont{
	font-size: 24px;
}
.head-remark .head-title{
	flex-grow: 1;
	line-height: 60px;
	font-size: 22px;
	padding-left: 80px;
}
.long-num{
	padding-left: 20px;
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
}
.short-num{
	padding-left: 20px;
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
}
/* 长评 */
.long-remark .long-head{
	width: 100%;
	height: 50px;
	/* background-color: #ccc; */
	margin-top: 10px;
	display: flex;
}
.long-head .long-head-img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	/* background-color: #09BB07; */
	border: 1px solid #ccc;
	margin-left: 15px;
}
.long-head .long-head-auth{
	width: 250px;
	padding-left: 10px;
	line-height: 60px;
	font-size: 18px;
	font-weight: bold;
}
.long-head .long-head-more{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
.long-head .long-head-more .iconfont{
	font-size: 24px;
	color: #808080;
}
/* 长评内容 */
.long-content .long-con-com{
	width: 280px;
	padding-left: 70px;
	font-weight:560;
}
.long-content .long-con-other{
	padding-left: 70px;
	padding-top: 5px;
	color: #B2B2B2;
}
.long-content .long-con-lang{
	width: 100%;
	height: 50px;
	line-height: 50px;
	display: flex;
	color: #B2B2B2;
	border-bottom: 1px solid #dee1e6;
}
.long-con-lang .long-time{
	width: 200px;
	height: 50px;
	padding-left: 70px;
}
.long-con-lang .long-good{
	width: 80px;
	display: flex;
}
.long-con-lang .long-good .iconfont{
	font-size: 22px;
	padding-left: 2px;
}
.long-con-lang .long-qibao{
	width: 50px;
}
.long-con-lang .long-qibao .iconfont{
	font-size: 24px;
}
/* 短评 */
.short-remark .short-head{
	width: 100%;
	height: 50px;
	/* background-color: #ccc; */
	margin-top: 10px;
	display: flex;
}
.short-head .short-head-img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	/* background-color: #09BB07; */
	/* border: 1px solid #ccc; */
	margin-left: 15px;
}
.short-head .short-head-auth{
	width: 250px;
	padding-left: 10px;
	line-height: 60px;
	font-size: 18px;
	font-weight: bold;
}
.short-head .short-head-more{
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
.short-head .short-head-more .iconfont{
	font-size: 24px;
	color: #808080;
}
/* 短评内容 */
.short-content .short-con-com{
	width: 280px;
	padding-left: 70px;
	font-weight:560;
}
.short-content .short-con-other{
	width: 280px;
	height: 40px;
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 70px;
	padding-top: 5px;
	color: #B2B2B2;
}
.short-content .short-con-lang{
	width: 100%;
	height: 50px;
	line-height: 50px;
	display: flex;
	color: #B2B2B2;
	border-bottom: 1px solid #dee1e6;
}
.short-con-lang .short-time{
	width: 200px;
	height: 50px;
	padding-left: 70px;
}
.short-con-lang .short-good{
	width: 80px;
	display: flex;
}
.short-con-lang .short-good .iconfont{
	font-size: 22px;
	padding-left: 2px;
}
.short-con-lang .short-qibao{
	width: 50px;
}
.short-con-lang .short-qibao .iconfont{
	font-size: 24px;
}
/* 已显示全部评论 */
.all_comments{
	width: 100%;
	height: 150px;
	line-height: 80px;
	text-align: center;
	font-size: 18px;
	margin-top: -10px;
	color: #B2B2B2;
	background-color: #ffffff;
}
/* 说说你的看法 */
.talk_about{
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ebebeb;
	display: flex;
}
.talk_about .about_img{
	width: 50px;
	height: 50px;
	margin-left: 10px;
	margin-top: 5px;
	border-radius: 50%;
}
.talk_about .about_you{
	margin-left: 10px;
	padding-top: 20px;
}
.talk_about .about_you > input{
	width: 280px;
	padding-left: 5px;
	padding-top: 5px;
	outline: none;
}
/* 遮罩层 */
.mask{
	width: 100%;
	height: 100%;
	position: fixed;
	background:rgba(0,0,0,.6) ;
	top: 0;
	left: 0;
}
.mask .login-mask{
	width: 100%;
	height: 250px;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: center;
	background-color: #fff;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
.login-mask .mask-name{
	font-size: 24px;
	font-weight: bold;
	margin-top: 20px;
}
.login-mask .mask-con{
	font-size: 16px;
	color: #808080;
	margin-top: 15px;
}
.login-mask .mask-choose{
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.login-mask .mask-choose .mask-weixi{
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	margin-right: 10px;
	background-color: #09BB07;
}
.login-mask .mask-choose .mask-weixi .iconfont{
	font-size: 30px;
	color: #fff;
}
.login-mask .mask-choose .mask-qq{
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	margin-left: 10px;
	background-color: #007AFF;
}
.login-mask .mask-choose .mask-qq .iconfont{
	font-size: 30px;
	color: #fff;
}
.mask-xieyi{
	display: flex;
	margin-top: 30px;
}
.mask-xieyi .radio{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border:3px solid  #B3B3B3;
	background: #ccc;
	margin-left: 10px;
}
.mask-xieyi .txt{
	color: #B2B2B2;
	font-size: 16px;
	margin-left: 10px;
}
</style>
